<template>
  <div class="nav-scroll-container">
    <div
      class="nav-item"
      v-for="(item, index) in navItems"
      :key="index"
      :style="{ backgroundColor: item.color }" 
      @click="$router.push(item.path)"
    >
      {{ item.title }}
      <span>{{ item.subtitle }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollableNav',
  data() {
    return {
      navItems: [
        { title: "精选推荐", subtitle: "选花HOT", color: "#ff9aa2" },
        { title: "花语大全", subtitle: "花语寄情", color: "#ff993e",path:'/in' },
        { title: "文章资讯", subtitle: "鲜花资讯", color: "#50b2fc",path:'/art' },
        { title: "问答", subtitle: "你问我答", color: "#d389f6" },
        // 可以添加更多的导航项并指定颜色
      ],
    };
  },
};
</script>

<style scoped>
.nav-scroll-container {
  display: flex;
  overflow-x: auto; /* 水平滚动 */
  white-space: nowrap; /* 不换行 */
  padding: 10px;
}

.nav-item {
  display: inline-block;
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
  text-align: center;
  color: white;
  font-weight: bold;
  cursor: pointer;
  min-width: 80px;
}

.nav-item span {
  display: block;
  font-size: 12px;
  font-weight: normal;
}
</style>
